Divider Guidlines 分隔線指導規則

Usage  用法

分隔線是一種視覺上分組元件並建立層次結構的方式。它們也可以用來暗示巢狀的父子關係。分隔線有兩種型別:

Full width 全寬
Inset 內嵌

Full width dividers 全寬分隔線

全寬分隔線主要用來分開不同型別的大塊內容。你可以直接在頁面上使用它,也可以把它放在卡片或列表裡面。它的作用有兩個:一是把可點選的區域和不可點選的區域分開,二是把相關的視覺元素組織在一起。

✓ 分割卡片容器的互動和非互動區域
× 過多分割線會讓介面顯得雜亂

Inset dividers 內嵌分隔線

使用內嵌分隔線來分隔一個部分內的相關內容。預設情況下,內嵌分隔線從螢幕兩側等距縮排。

內嵌分隔線用於分隔相關內容,例如列表中的電子郵件。它們應該與圖示或頭像等錨定元素一起使用,並與螢幕前緣對齊。
可以存在與相關專案列表中
可以放在佈局中間,用於分割正文文字和選擇標籤元件等元素

Using both types of dividers on the same screen在同一螢幕上使用兩種型別的分隔線

如果在使用者介面中同時使用兩種型別的分隔線,它們必須強化不同部分之間的資訊層次結構。

用全寬分隔線來區分不同種類的內容。用內嵌分隔線來區分同類內容中的子專案。

列表項若格式重複,無需內嵌分隔線,僅使用項間邊距即可。

Vertical divider  垂直分隔線

垂直分隔線可用於在大螢幕上排列內容,例如將段落文字與影片或影象媒體分開。

分隔線是裝飾性元素,沒有對比度最低要求。